<template>
	<view class="box">
		<!-- 2.0.19支持autoBack，默认为false -->
		<u-navbar title="个人中心" height="80px" @rightClick="rightClick" :autoBack="true" rightText="保存"
			rightColor="#528efe" leftIconColor="#528efe">
		</u-navbar>
		<div class="cons">

			<u-cell-group>
				<u-cell size="large" title="跟进类型" :value="list.class" isLink="true" @click="show1"></u-cell>
				<u-cell size="large" title="跟进时间" :value="list.time" isLink="true" @click="show12 = true"></u-cell>
				<u-cell size="large" title="上传附件" :value="list.uh" isLink="true" @click="show22 = true"></u-cell>
				<!-- <u-cell size="large" title="跟进内容"  :value="list.class" isLink="true"></u-cell> -->
				<div class="u_con">
					跟进内容
					<textarea name="" v-model="list.ne" placeholder="勤跟进, 多签到" id="" cols="30" rows="10"></textarea>
				</div>
			</u-cell-group>
			<div class="negs"></div>
			<u-cell-group>

				<u-cell size="large" title="客户名称" :value="list.name" isLink="true" @click="gowwww"></u-cell>
				<u-cell size="large" title="客户状态" :value="list.vl" isLink="true" @click="goqnos"></u-cell>
				<u-cell size="large" title="联系人" :value="list.lm" isLink="true" @click="lmxirf"></u-cell>
				<!-- <u-cell size="large" title="联系人"  :value="list.ti" isLink="true"></u-cell> -->
				<div class="u_cons">
					提醒谁看
					<p style="height: 30rpx;"></p>
					<!-- <span></span> -->
					<!-- <span></span> -->
					<div class="box">

						<div class="connos">

							<div class="tz">
								<u-icon name="account-fill" color="#fefefe" size="28"></u-icon>

							</div>
							赵小刚
						</div>
						<div class="connnos">

							<div class="tz">
								<u-icon name="account-fill" color="#fefefe" size="28"></u-icon>

							</div>
							周小明
						</div>
						<div class="connnos">

							<div class="tz">
								<u-icon name="account-fill" color="#fefefe" size="28"></u-icon>

							</div>
							郭小涛
						</div>
						<div class="connnos">

							<div class="tz">
								<u-icon name="account-fill" color="#fefefe" size="28"></u-icon>

							</div>
							张小伟
						</div>
						<div class="connnos" @click="gomogo">

							<div class="tzs">
								<u-icon name="plus-circle" color="#cccccc" size="45"></u-icon>

							</div>
							更多
						</div>
					</div>
				</div>
				<div class="negss">
					跟进任务
				</div>
			</u-cell-group>
			<u-cell-group>
				<!-- <u-cell size="large" title="客户名称" :value="list.name" isLink="true"></u-cell> -->
				<div class="boxsss">
					<div class="left">创建下次跟进任务</div>
					<!-- <u-switch v-model="value" @change="change"></u-switch> -->
					<switch :checked="value" @change="change" />
				</div>
				<u-cell v-if="value" size="large" title="跟进时间" :value="list.gtime" isLink="true"
					@click="show13 = true"></u-cell>
				<div class="boxssss" v-if="value">
					<div class="left">跟进内容</div>
					<!-- <u-switch v-model="value" @change="change"></u-switch> -->
					<input type="text" v-model="list.gne" placeholder="点击填写" />
				</div>
				<u-cell v-if="value" size="large" title="跟进人员" :value="list.grf" isLink="true" @click="gomogo"></u-cell>
				<u-cell v-if="value" size="large" title="任务提醒" :value="list.grn" isLink="true"></u-cell>
				<u-cell v-if="value" size="large" title="提醒方式" :value="list.gti" isLink="true"></u-cell>
			</u-cell-group>
		</div>
		<div class="boxts" v-show="flag">
			<div class="top">
				<p style="color: #2979ff;" @click="showgr">关闭</p>
				<p>{{tit}}</p>
				<p></p>
			</div>
			<div class="con" v-for="item in list1" :key="item" @click="gonos(item)">
				{{item}} <u-icon v-if="list.class === item" name="checkmark" color="#2979ff" size="20"></u-icon>
			</div>
		</div>
		<up-calendar :show="show12" :mode="mode" @confirm="confirm"></up-calendar>
		<up-calendar :show="show13" :mode="mode" @confirm="confirm1"></up-calendar>
		<u-popup :show="show22" :round="10" mode="bottom" @close="close" @open="open">
			<div class="ul">
				<li class="li" @click="pd">拍照</li>
				<li class="li" @click="xr">从相册中选择</li>
				<li class="li" @click="bf">选择本地文件</li>
			</div>
			<div class="quxn" @click="show22 = false">取消</div>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show12: false,
				show13: false,
				show22: false,
				mode: 'single',
				list: {
					class: '点击选择',
					time: '点击选择',
					uh: '点击选择',
					ne: '',
					name: '点击选择',
					vl: '点击选择',
					lm: '点击选择',
					ti: '点击选择',
					gtime: '点击选择',
					gne: '',
					grf: '赵小刚',
					grn: '点击选择',
					gti: '点击选择'
				},
				value: true,
				flag: false,
				list1: [],
				tit: ''

			}
		},
		methods: {
			rightClick() {
				console.log('rightClick');
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					duration: 2000,
					success: () => {
						// 在提示框关闭后跳转到另一个页面
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/message/crunch/igui/igui'
							});
						}, 2000);
					}
				});
			},
			gomogo() {
				uni.navigateTo({
					url: '/pages/message/crunch/xrzeigyr/xrzeigyr'
				})
			},
			change(e) {
				console.log('change', e);
				this.value = !this.value
			},
			show1() {
				this.tit = "跟进类型"
				this.list1 = ['到访', '电话', '微信', '短信', '邮件', 'QQ', '其他']
				this.flag = true
			},
			showgr() {
				this.flag = false
			},
			gonos(item) {
				if (this.list1[0] === '到访') {

					this.list.class = item
				}
				if (this.list1[0] === '了解产品') {
					this.list.vl = item
				}
				setTimeout(() => {
					this.flag = false
				}, 100)
			},
			confirm(e) {
				console.log(e)
				this.list.time = e[0]
				this.show12 = false
			},
			confirm1(e) {
				console.log(e)
				this.list.gtime = e[0]
				this.show13 = false
			},
			pd() {
				console.log('拍照')
				uni.navigateTo({
					url: '/pages/message/crunch/photograph/photograph'
				})
			},
			xr() {
				console.log('相册')
				uni.chooseImage({
					count: 1, // 最多选择的图片数量
					sizeType: ['original', 'compressed'], // 图片选择的类型，原图和压缩图
					sourceType: ['album'], // 图片选择的来源，相册
					success: res => {
						// 选择图片成功的回调函数
						console.log('选择的图片路径：', res.tempFilePaths);
					},
					fail: err => {
						// 选择图片失败的回调函数
						console.log('选择图片失败：', err);
					}
				});
			},
			bf() {
				console.log('选择')
				uni.chooseImage({
					count: 1, // 最多选择的图片数量
					sizeType: ['original', 'compressed'], // 图片选择的类型，原图和压缩图
					sourceType: ['album'], // 图片选择的来源，相册
					success: res => {
						// 选择图片成功的回调函数
						console.log('选择的图片路径：', res.tempFilePaths);
					},
					fail: err => {
						// 选择图片失败的回调函数
						console.log('选择图片失败：', err);
					}
				});
			},
			gowwww() {
				uni.navigateTo({
					url: '/pages/message/crunch/xrze/xrze'
				})
			},
			goqnos() {
				this.tit = "客户状态",
					this.list1 = ['了解产品', '正在跟进', '正在试用', '准备购买', '准备付款', '已经购买', '暂时搁置']
				this.flag = true
			},
			lmxirf() {
				uni.navigateTo({
					url: '/pages/message/crunch/lmxirf/lmxirf'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quxn {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #3478f7;
	}

	.ul {
		width: 100%;
		// border-radius: 40rpx;
		border-bottom: 40rpx solid #a7a7a7;

		// height: 30px;
		// background-color: saddlebrown;
		.li {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #f2f2f2;
			text-align: center;
			color: #3478f7;
			line-height: 100rpx;
		}
	}

	.boxts {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: white;
		// padding-top: 200rpx;
		z-index: 100000;

		// display: flex;
		.top {
			display: flex;
			justify-content: space-between;
			padding: 0px 20rpx;
			height: 150rpx;
			align-items: center;
		}

		.con {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			border-top: 1rpx solid #f2f2f2;
		}
	}

	.boxsss {
		display: flex;
		height: 100rpx;
		border-top: 1rpx solid #f9f9f9;
		border-bottom: 1rpx solid #f9f9f9;
		justify-content: space-between;
		padding: 0 10rpx;
		align-items: center;
	}

	.boxssss {
		display: flex;
		height: 100rpx;
		border-top: 1rpx solid #f9f9f9;
		border-bottom: 1rpx solid #f9f9f9;
		justify-content: space-between;
		padding: 0 30rpx;
		align-items: center;
	}

	.negss {
		padding: 30rpx;
		color: #999999;
		font-size: 30rpx;
		background-color: #f9f9f9;
	}

	.u_cons {
		// display: flex;
		padding: 30rpx;

		.box {
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			// position: fixed;
			// bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			font-size: 30rpx;

			.connos {
				display: flex;
				flex-direction: column;
				justify-content: center;

				align-items: center;
			}

			.tz {
				width: 80rpx;
				height: 80rpx;
				background-color: #cccccc;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}

			.tzs {
				width: 80rpx;
				height: 80rpx;
				// background-color: #cccccc;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}

			.qt {
				background-color: #0079fe;
				border-radius: 40rpx;
				padding: 10rpx 10rpx;
				color: white;
			}
		}
	}

	.u_con {
		padding: 10rpx 30rpx;
	}

	.negs {
		background-color: #f9f9f9;
		height: 40rpx;
	}

	.box {
		width: 100%;
		height: 100%;

		.cons {
			border-top: 250rpx solid #f9f9f9;
		}
	}
</style>